<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link href="../plugin/layer/laydate/need/laydate.css" rel="stylesheet">
		<link href="../plugin/layer/laydate/skins/default/laydate.css" rel="stylesheet">
		<style>
			.n-default .n-left,
			.n-default .n-right {
				margin-top: 32px!important;
			}
			
			.confirm {
				background-color: #D0260C;
				padding: 2px 5px;
				border-radius: 5px;
				color: #fff;
			}
			
			a.confirm:hover {
				color: #fff;
			}
			
			.ZZHT-order-list .order-head td {
				line-height: 23px;
			}
		</style>
	</head>

	<body>
		<div id="header"></div>
		<!--<div id="headerBox"></div>-->
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">用户中心</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="user_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head clearfix"><span class="left fl">我的订单</span><span class="right fr">当前位置：我的订单--消费订单</span></div>
					<div class="search-wrap">
						<div class="tab-menu">
							<a href="" class="current">线上商城订单</a>
							<span>|</span>
							<a href="13-1.html">线下商家订单</a>
						</div>
						<form class="search-form" name="form">
							<label>
            					订单编号：<input class="u-query" id="orderNo" name="orderNo" type="text">
        					</label>
							<label>
					            &nbsp;&nbsp;订单状态：
					            <select id="sOrderStatus" name="sOrderStatus" class="u-query">
					                <option value="">全部</option>
					                <option value="-1">已取消</option>
					                <option value="-2">待付款</option>
					                <option value="0">待发货</option>
					                <option value="1">待收货</option>
					                <option value="2,3">待评价</option>
					                <option value="10000">已完成</option>
					                <option value="-3">退款</option>
					            </select>
					        </label>
							<label>
					            &nbsp;&nbsp;时间：<input class="laydate-icon u-query" type="text" name="beginTime" id="beginTime" placeholder="开始时间">
					            - <input class="laydate-icon u-query" type="text" name="endTime" id="endTime" placeholder="结束时间">
					        </label>
							<a href="javascript:;" class="btn-inquire" onclick="orderListByPage();"><i class="icon-search"></i></a>
						</form>
					</div>
					<div class="ZZHT-user-content">
						<table class="ZZHT-order-list">
							<thead>
								<tr class="head">
									<th width="45">编号</th>
									<th width="150">订单号</th>
									<th width="150">下单时间</th>
									<th width="100">付款金额（¥）</th>
									<th width="100">奖励积分</th>
									<th width="80">订单状态</th>
									<!--<th>备注</th>-->
									<th style="text-align: center;">操作</th>
								</tr>
							</thead>
							<!-- 加载中提示 -->
							<tbody id="loadingBdy">
								<tr id="loading" class="empty-row" style="display: none;">
									<td colspan="10"><img src="../plugin/userLib/img/loading.gif">正在加载数据...</td>
								</tr>
							</tbody>
							<tbody class="j-order-row" v-cloak>
								<tr class="order-head" v-for="v in tab">
									<td> {{v.orderId}} </td>
									<td>
										<a class="ZZHT-fblue">{{v.orderNO}}</a>
									</td>
									<td> {{v.createTime}} </td>
									<td> {{v.goodsMoney}} </td>
									<td> {{v.totalMoneyScore}} </td>
									<td> {{v.orderStatus}} </td>
									<!--<td> {{v.orderRemarks}}</td>-->
									<td style="text-align: center;">
										<a :href='"orderDetail.html?orderId="+v.orderId+"&orderStatus="+encodeURI(v.orderStatus)'>查看详情</a>
										<span v-if="v.orderStatus=='待付款'">
											<p>
												<a :href='"../order/order.html?sktOrdersId="+v.orderId' style="color:red;">去付款</a>
											</p>
										</span>
										<span v-if="v.orderStatus=='待发货'">
											<p>
												<a href="#none" @click="applyRefund(v.orderId)" style="color:red;">申请退款</a>
											</p>
										</span>
										<span v-if="v.orderStatus=='待收货'">
											<p>
												<a href="#none" @click="applyRefund(v.orderId)" style="color:red;">申请退款</a>
											</p>
											<p>
												<a href="#none" @click="confirm(v.orderId)" style="color:red;">确定收货</a>
											</p>
										</span>
										<span v-if="v.orderStatus=='待评价'">
											<p>
												<a :href='"orderDetail.html?orderId="+v.orderId+"&orderStatus="+encodeURI(v.orderStatus)' style="color:red;">去评价</a>
											</p>
										</span>
									</td>
								</tr>
							</tbody>
							<tbody class="j-order-row empty_tab">
								<tr>
									<td colspan='8' align="center" style='padding:5px 0px 5px 0px'>暂无数据</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div id="pager" style="text-align: center;"></div>
				</div>
			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>

		<!--
        	作者：605892980@qq.com
        	时间：2018-06-25
        	描述：申请退款弹窗
        -->
		<div id="layui-layer2" style="display: none;">
			<div id="" style="height: 225px;">
				<table style="margin-top:10px;width:90%">
					<tbody>
						<tr>
							<td colspan="2" style="padding-left:40px;">请选择取消订单申请退款的原因，以便我们能更好的为您服务。</td>
						</tr>
						<tr>
							<th width="120">原因：</th>
							<td>
								<select id="reason" onchange="javascript:changeRejectType(this.value)">
									<option value="1">配送超时</option>
									<option value="2">不喜欢/不想要</option>
									<option value="3">货物破损已拒签</option>
									<option value="4">空包裹</option>
									<option value="5">快递/物流一直未送达</option>
									<option value="6">快递/物流无跟踪记录</option>
									<option value="10000">其他</option>
								</select>
							</td>
						</tr>
						<tr id="rejectTr" style="display:none">
							<th width="120">原因
								<font color="red">*</font>：</th>
							<td>
								<textarea id="content" style="width:99%;height:50px;" maxlength="200"></textarea>
							</td>
						</tr>
						<tr>
							<th width="120">退款金额
								<font color="red">*</font>：</th>
							<td>
								<input type="text" id="money" maxlength="10" onkeyup="javascript:ZZHT.isChinese(this,1)" onkeypress="return ZZHT.isNumberdoteKey(event,true)" onblur="javascript:ZZHT.limitDecimal(this,2)" value="0.00">
							</td>
						</tr>
						<tr>
							<th width="80">快递公司：</th>
							<td>
								<select id="expressId">
									<option value="">请选择</option>
									<option value="1">申通快递</option>
									<option value="2">顺丰快递</option>
									<option value="3">邮政快递</option>
									<option value="4">圆通快递</option>
									<option value="5">韵达快递</option>
									<option value="6">菜鸟快递</option>
									<option value="7">中通快递</option>
									<option value="8">顺丰</option>
								</select>
							</td>
						</tr>
						<tr>
							<th>快递号：</th>
							<td><input type="text" id="expressNo" maxlength="20" style="width:80%"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../plugin/layer/layer.js"></script>
		<script src="../plugin/layer/laydate/laydate.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/common_view.js"></script>
		<!--<script src="../plugin/userLib/js/log.js"></script>-->
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script>
			var search_data = {}; //查询条件
			var pages = 1; //总页数
			var pageNum = 1; //当前页

			initDate(); //初始化日期插件

			$(function() {
				getList();
				initPage();
			});

			$('.empty_tab').hide();

			var vm = new Vue({
				el: '.ZZHT-order-list',
				data: {
					tab: [],
				},
				methods: {
					//确认收货
					confirm: function(oid) {
						console.log(oid);
						//输入支付密码
						layer.prompt({
							title: '输入支付密码，并确认',
							formType: 1
						}, function(pass, index) {
							console.log(pass);
							var data = {
								"orderIdList": oid,
								"payPwd": pass,
								"userId": localStorage.userId
							};
							$('.searchCont input').val(''); //清空搜索框
							$('.searchResult').hide();
							$.ajax({
								type: "get",
								url: SURL + "webAccount/toPayGoods",
								async: false,
								data: data,
								dataType: 'json',
								success: function(res) {
									console.log(res);
									layer.msg(res.entity.msg);
									window.location.reload();
								}
							});

							layer.close(index);
						});
					},
					//申请退款
					applyRefund: function(orderId,money) {
						console.log(orderId);

						var w = layer.open({
							type: 1,
							title: "申请退款",
							border: [0],
							content: $('#layui-layer2'),
							area: ['500px', '350px'],
							btn: ['提交', '关闭窗口'],
							yes: function(index, layero) {
								var params = {};

								params.orderId = orderId;
								params.refundTo = localStorage.userId;
								params.refundReson = $.trim($('#reason').val());
								params.refundOtherReson = $.trim($('#content').val());
								params.expressId = $.trim($('#expressId').val());
								params.expressNo = $.trim($('#expressNo').val());
								params.backMoney = $.trim($('#money').val());
								params.refundRemark = '';

								if(params.backMoney < 0) {
									ZZHT.msg('无效的退款金额', {
										icon: 2
									});
									return;
								}
								if(params.refundReson == 10000 && params.refundOtherReson == '') {
									ZZHT.msg('请输入原因', {
										icon: 2
									});
									return;
								}
								console.log(params);
				                $.get(SURL+'sktOrderRefunds/applayRefundsOrders',params,function(json){
				                    if(json.messageCode==200){
				                        layer.msg(json.message);
										layer.close(w);
				                    }else{
				                        layer.msg(json.message);
				                    }
				                });
							}
						});

					},
					//去评价
					toReview: function(id) {
						console.log(id);
					}
				}
			});

			function getList() {
				$('#loading').show();
				var data = $.extend(true, {}, search_data);

				data.userId = localStorage.userId;

				data.pageNum = pageNum;

				$.ajax({ //获取记录列表
					type: "get",
					url: SURL + "sktOrders/selectUserOrders",
					async: false,
					data: data,
					timeout: 5000,
					dataType: 'json',
					success: function(res) {
						$('#loading').hide();
						console.log(res);
						pages = res.page;
						if(res.messageCode == 200) {
							if(res.entity.length > 0) {
								$('.empty_tab').hide();
							} else {
								$('.empty_tab').show();
							}
							vm.tab = res.entity;
						} else {
							layer.msg(res.message);
						}
					},
					error: function(textStatus) {
						console.error(textStatus);
					},
					complete: function(XMLHttpRequest, status) {
						if(status == 'timeout') {
							layer.msg("网络超时，请刷新", function() {
								location.reload();
							})
						}
					}
				});
			}
			
			function changeRejectType(v){
			    if(v==10000){
			        $('#rejectTr').show();
			    }else{
			        $('#rejectTr').hide();
			    }
			}
		</script>
	</body>

</html>